<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello World</title>
  <script src="https://unpkg.com/vue"></script>
  
</head>

<body>
  <div id="root"></div>
  <script>
    /* 
      1. 双向数据绑定
      2. input输入框
      3. textarea文本框
      4. checkbox 勾选
        - true/false
        - array
      5. radio 单选
        - string
      6. select+option
        - string 单选
        - array 多选
      7. 循环输出option
      8. checkbox 自定义显示内容
      9. .lazy修饰符 
      - blur事件时触发
      10. .number修饰符 
      - 将结果转换为number类型
      11. .trim修饰符
    */
    const app = Vue.createApp({
      template: `
        请选择：
        <span>{{check}}</span>
        <input type="checkbox" v-model="check" true-value="开启" false-value="未开启" />
      `,
      data() {
        return {
          check: '未开启'
        }
      }
    })
    
    const vm = app.mount('#root');
  </script>
</body>

</html>